<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实名认证 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        .page-header {
            background-color: #2B7DE1;
            color: white;
            padding: 12px 16px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .back-button {
            position: absolute;
            left: 16px;
            font-size: 20px;
            color: white;
        }
        
        .page-title {
            font-size: 17px;
            font-weight: 500;
        }
        
        .page-content {
            padding-top: 60px;
            padding-bottom: 80px;
        }
        
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background-color: #2B7DE1;
        }
        
        .time {
            font-size: 14px;
            color: white;
        }
        
        .status-icons {
            display: flex;
            gap: 5px;
            color: white;
        }
        
        .icon {
            font-size: 14px;
        }

        .verification-container {
            background-color: white;
            margin: 16px;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .step-indicator {
            display: flex;
            margin-bottom: 24px;
        }
        
        .step {
            flex: 1;
            text-align: center;
            position: relative;
        }
        
        .step-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #EEEEEE;
            color: #999999;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 14px;
        }
        
        .step.active .step-number {
            background-color: #2B7DE1;
            color: white;
        }
        
        .step.completed .step-number {
            background-color: #34C759;
            color: white;
        }
        
        .step-title {
            font-size: 12px;
            color: #999999;
        }
        
        .step.active .step-title {
            color: #2B7DE1;
            font-weight: 500;
        }
        
        .step.completed .step-title {
            color: #34C759;
        }
        
        .step-line {
            height: 2px;
            background-color: #EEEEEE;
            position: absolute;
            top: 12px;
            width: 100%;
            left: 50%;
            z-index: -1;
        }
        
        .step:last-child .step-line {
            display: none;
        }
        
        .step.completed .step-line {
            background-color: #34C759;
        }
        
        .step-content {
            margin-bottom: 24px;
        }
        
        .form-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 16px;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            display: block;
            font-size: 15px;
            margin-bottom: 8px;
            color: #333;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            box-sizing: border-box;
        }
        
        .form-input:focus {
            border-color: #2B7DE1;
            outline: none;
        }
        
        .upload-container {
            border: 1px dashed #ccc;
            border-radius: 6px;
            padding: 16px;
            text-align: center;
            margin-bottom: 16px;
            background-color: #f9f9f9;
            position: relative;
        }
        
        .upload-icon {
            font-size: 24px;
            color: #999;
            margin-bottom: 8px;
        }
        
        .upload-text {
            color: #666;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .upload-tip {
            color: #999;
            font-size: 12px;
        }
        
        .upload-preview {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 6px;
            display: none;
        }
        
        .photo-upload-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .photo-upload {
            width: 48%;
        }
        
        .photo-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            display: block;
        }
        
        .submit-button {
            background-color: #2B7DE1;
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 6px;
            font-size: 16px;
            width: 100%;
            margin-top: 20px;
            cursor: pointer;
        }
        
        .submit-button:active {
            background-color: #236abd;
        }
        
        .submit-button.disabled {
            background-color: #d0d0d0;
            cursor: not-allowed;
        }
        
        .verification-result {
            text-align: center;
            padding: 20px 0;
        }
        
        .result-icon {
            font-size: 60px;
            margin-bottom: 16px;
        }
        
        .result-success {
            color: #34C759;
        }
        
        .result-pending {
            color: #FF9500;
        }
        
        .result-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 8px;
        }
        
        .result-message {
            color: #666;
            margin-bottom: 24px;
        }
        
        .message-box {
            background-color: #f8f8f8;
            border-left: 4px solid #2B7DE1;
            padding: 12px 16px;
            margin-bottom: 16px;
            font-size: 14px;
            color: #666;
        }
        
        .info-box {
            background-color: #e8f4fc;
            padding: 12px 16px;
            margin-bottom: 16px;
            font-size: 14px;
            color: #2B7DE1;
            border-radius: 6px;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <span class="time">10:25</span>
            <div class="status-icons">
                <span class="icon">📶</span>
                <span class="icon">📡</span>
                <span class="icon">🔋</span>
            </div>
        </div>
        
        <!-- 页面头部 -->
        <header class="page-header">
            <a href="profile.html" class="back-button">←</a>
            <div class="page-title">实名认证</div>
        </header>
        
        <div class="page-content">
            <div class="verification-container">
                <!-- 步骤指示器 -->
                <div class="step-indicator">
                    <div class="step active" id="step1">
                        <div class="step-number">1</div>
                        <div class="step-title">填写信息</div>
                        <div class="step-line"></div>
                    </div>
                    <div class="step" id="step2">
                        <div class="step-number">2</div>
                        <div class="step-title">上传证件</div>
                        <div class="step-line"></div>
                    </div>
                    <div class="step" id="step3">
                        <div class="step-number">3</div>
                        <div class="step-title">提交审核</div>
                    </div>
                </div>
                
                <!-- 第一步：填写基本信息 -->
                <div class="step-content" id="step1-content">
                    <div class="message-box">
                        请填写真实准确的个人信息，认证后将无法修改。所有信息仅用于平台实名认证。
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">真实姓名</label>
                        <input type="text" class="form-input" id="realName" placeholder="请输入您的真实姓名">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">身份证号码</label>
                        <input type="text" class="form-input" id="idNumber" placeholder="请输入18位身份证号码">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">手机号码</label>
                        <input type="tel" class="form-input" id="phoneNumber" placeholder="请输入您的手机号码">
                    </div>
                    
                    <button class="submit-button" onclick="goToStep2()">下一步</button>
                </div>
                
                <!-- 第二步：上传证件照 -->
                <div class="step-content hidden" id="step2-content">
                    <div class="message-box">
                        请上传清晰的证件照片，确保信息可见，照片未过期，无遮挡和反光。
                    </div>
                    
                    <div class="photo-upload-container">
                        <div class="photo-upload">
                            <span class="photo-label">身份证正面照</span>
                            <div class="upload-container" onclick="document.getElementById('idCardFront').click()">
                                <input type="file" id="idCardFront" style="display: none;" accept="image/*" onchange="previewImage(this, 'frontPreview')">
                                <img id="frontPreview" class="upload-preview">
                                <div class="upload-placeholder" id="frontPlaceholder">
                                    <div class="upload-icon">📷</div>
                                    <div class="upload-text">点击上传</div>
                                    <div class="upload-tip">包含头像和基本信息</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="photo-upload">
                            <span class="photo-label">身份证背面照</span>
                            <div class="upload-container" onclick="document.getElementById('idCardBack').click()">
                                <input type="file" id="idCardBack" style="display: none;" accept="image/*" onchange="previewImage(this, 'backPreview')">
                                <img id="backPreview" class="upload-preview">
                                <div class="upload-placeholder" id="backPlaceholder">
                                    <div class="upload-icon">📷</div>
                                    <div class="upload-text">点击上传</div>
                                    <div class="upload-tip">包含签发机关信息</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <span class="photo-label">手持身份证照片</span>
                        <div class="upload-container" onclick="document.getElementById('idCardHolding').click()">
                            <input type="file" id="idCardHolding" style="display: none;" accept="image/*" onchange="previewImage(this, 'holdingPreview')">
                            <img id="holdingPreview" class="upload-preview">
                            <div class="upload-placeholder" id="holdingPlaceholder">
                                <div class="upload-icon">📷</div>
                                <div class="upload-text">点击上传</div>
                                <div class="upload-tip">本人手持身份证正面，人脸和证件清晰可见</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="info-box">
                        为确保审核顺利通过，请确保上传的证件照片：<br>
                        1. 证件在有效期内<br>
                        2. 照片清晰完整，信息可辨认<br>
                        3. 手持证件照中人脸和证件同时可见
                    </div>
                    
                    <div style="display: flex; gap: 10px;">
                        <button class="submit-button" style="background-color: #f0f0f0; color: #666;" onclick="backToStep1()">上一步</button>
                        <button class="submit-button" onclick="goToStep3()">下一步</button>
                    </div>
                </div>
                
                <!-- 第三步：提交审核 -->
                <div class="step-content hidden" id="step3-content">
                    <div class="form-title">确认信息</div>
                    
                    <div style="background-color: #f9f9f9; padding: 16px; border-radius: 6px; margin-bottom: 20px;">
                        <div style="margin-bottom: 12px;">
                            <div style="color: #999; margin-bottom: 4px; font-size: 13px;">姓名</div>
                            <div id="confirmName" style="font-size: 15px;">张三</div>
                        </div>
                        <div style="margin-bottom: 12px;">
                            <div style="color: #999; margin-bottom: 4px; font-size: 13px;">身份证号</div>
                            <div id="confirmIdNumber" style="font-size: 15px;">310************123X</div>
                        </div>
                        <div>
                            <div style="color: #999; margin-bottom: 4px; font-size: 13px;">手机号码</div>
                            <div id="confirmPhone" style="font-size: 15px;">138****1234</div>
                        </div>
                    </div>
                    
                    <div class="message-box">
                        提交后将进入人工审核环节，预计1-3个工作日完成审核。审核结果将以站内信和短信通知您。
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">
                            <input type="checkbox" id="agreement" style="margin-right: 8px;">
                            我已阅读并同意《实名认证服务协议》和《个人信息保护声明》
                        </label>
                    </div>
                    
                    <div style="display: flex; gap: 10px;">
                        <button class="submit-button" style="background-color: #f0f0f0; color: #666;" onclick="backToStep2()">上一步</button>
                        <button class="submit-button" id="submitBtn" onclick="submitVerification()" disabled>提交审核</button>
                    </div>
                </div>
                
                <!-- 审核结果 -->
                <div class="step-content hidden" id="result-content">
                    <div class="verification-result">
                        <div class="result-icon result-pending">⏳</div>
                        <div class="result-title">认证审核中</div>
                        <div class="result-message">您的实名认证信息已提交，正在审核中，预计1-3个工作日内完成。审核结果将通过站内信和短信通知您。</div>
                        <button class="submit-button" onclick="window.location.href='profile.html'">返回个人中心</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item active">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 更新顶部时间
            function updateTime() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                document.querySelector('.time').textContent = `${hours}:${minutes}`;
            }
            
            updateTime();
            setInterval(updateTime, 60000);
            
            // 协议复选框监听
            document.getElementById('agreement').addEventListener('change', function() {
                document.getElementById('submitBtn').disabled = !this.checked;
                if (this.checked) {
                    document.getElementById('submitBtn').classList.remove('disabled');
                } else {
                    document.getElementById('submitBtn').classList.add('disabled');
                }
            });
        });
        
        // 图片预览功能
        function previewImage(input, previewId) {
            const preview = document.getElementById(previewId);
            const placeholder = document.getElementById(previewId.replace('Preview', 'Placeholder'));
            
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                    placeholder.style.display = 'none';
                }
                
                reader.readAsDataURL(input.files[0]);
            }
        }
        
        // 步骤切换功能
        function goToStep2() {
            // 简单验证
            const name = document.getElementById('realName').value;
            const idNumber = document.getElementById('idNumber').value;
            const phone = document.getElementById('phoneNumber').value;
            
            if (!name) {
                showToast('请填写真实姓名');
                return;
            }
            
            if (!idNumber || idNumber.length !== 18) {
                showToast('请填写有效的18位身份证号码');
                return;
            }
            
            if (!phone || phone.length !== 11) {
                showToast('请填写有效的11位手机号码');
                return;
            }
            
            // 步骤切换
            document.getElementById('step1').classList.remove('active');
            document.getElementById('step1').classList.add('completed');
            document.getElementById('step2').classList.add('active');
            
            document.getElementById('step1-content').classList.add('hidden');
            document.getElementById('step2-content').classList.remove('hidden');
        }
        
        function backToStep1() {
            document.getElementById('step1').classList.add('active');
            document.getElementById('step1').classList.remove('completed');
            document.getElementById('step2').classList.remove('active');
            
            document.getElementById('step1-content').classList.remove('hidden');
            document.getElementById('step2-content').classList.add('hidden');
        }
        
        function goToStep3() {
            // 检查是否上传了所有照片
            const frontPreview = document.getElementById('frontPreview');
            const backPreview = document.getElementById('backPreview');
            const holdingPreview = document.getElementById('holdingPreview');
            
            if (frontPreview.style.display !== 'block') {
                showToast('请上传身份证正面照');
                return;
            }
            
            if (backPreview.style.display !== 'block') {
                showToast('请上传身份证背面照');
                return;
            }
            
            if (holdingPreview.style.display !== 'block') {
                showToast('请上传手持身份证照片');
                return;
            }
            
            // 更新确认信息
            const name = document.getElementById('realName').value;
            const idNumber = document.getElementById('idNumber').value;
            const phone = document.getElementById('phoneNumber').value;
            
            document.getElementById('confirmName').textContent = name;
            // 身份证号码脱敏展示
            document.getElementById('confirmIdNumber').textContent = idNumber.substring(0, 3) + '************' + idNumber.substring(idNumber.length - 4);
            // 手机号脱敏展示
            document.getElementById('confirmPhone').textContent = phone.substring(0, 3) + '****' + phone.substring(7);
            
            // 步骤切换
            document.getElementById('step2').classList.remove('active');
            document.getElementById('step2').classList.add('completed');
            document.getElementById('step3').classList.add('active');
            
            document.getElementById('step2-content').classList.add('hidden');
            document.getElementById('step3-content').classList.remove('hidden');
        }
        
        function backToStep2() {
            document.getElementById('step2').classList.add('active');
            document.getElementById('step2').classList.remove('completed');
            document.getElementById('step3').classList.remove('active');
            
            document.getElementById('step2-content').classList.remove('hidden');
            document.getElementById('step3-content').classList.add('hidden');
        }
        
        function submitVerification() {
            // 检查协议是否勾选
            if (!document.getElementById('agreement').checked) {
                showToast('请阅读并同意相关协议');
                return;
            }
            
            // 提交表单
            showToast('正在提交认证信息...');
            
            // 模拟提交过程
            setTimeout(() => {
                document.getElementById('step3').classList.remove('active');
                document.getElementById('step3').classList.add('completed');
                
                document.getElementById('step3-content').classList.add('hidden');
                document.getElementById('result-content').classList.remove('hidden');
            }, 1500);
        }
        
        // 轻提示
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast');
            if (toast) {
                toast.remove();
            }
            
            // 创建新的toast
            toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 样式
            toast.style.position = 'fixed';
            toast.style.left = '50%';
            toast.style.bottom = '10%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '20px';
            toast.style.fontSize = '14px';
            toast.style.zIndex = '9999';
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            
            // 显示和自动隐藏
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }
    </script>
</body>
</html> 